﻿﻿<!DOCTYPE html>
<html>
    <head>
        <title>会员注册表单</title>
        <style>
         
           body{font-size: 12px;font-family: "微软雅黑"; font-weight: bold;}
           body,form,input,h1,p{padding:0;margin: 0;}
           form{
               width: 949px;
               height: 687px;
               margin: 20px auto;
               padding: 168px;
               background:url(11111.png) no-repeat center center;
               box-sizing: border-box;
               
           }
           h2{
               font-size: 24px;
               text-align: center;
               margin: 16px 0;
           }
           p{
               height: 24px;
               margin-top: 10px;
           }
           
           .advice{height: 100px;}

           p span{
               text-align: right;
               width: 85px;
               margin-right: 15px;
               display: inline-block;
           }
           p input{
               height: 24px;
           }
           textarea,input{
               vertical-align: middle;
               resize: none;
               border-radius: 5px;
           }
           .mgn{
               height: 28px;
           }
           .btn{
               width: 180px;
               height: 28px;
               border-radius: 5px;
               background: #d9e2ed;
           }
        </style>
        </head>
        <body>
            <form action ="#" method="post">
                <h2>
                    会员注册
                </h2>
                <p>
                    <span>性质:</span>
                    <input type="radio" name="Nature" checked="checked"/>&nbsp;&nbsp;个人
                    <input type="radio" name="Nature" checked="checked"/>&nbsp;&nbsp;公司
                </p>
                <p>
                    <span>昵称:</span>
                    <input type="text" placeholder="小明" maxlength="6"/>
                </p>
                <p>
                    <span>密码 :</span>
                    <input type="password" size="40"/> 
                </p>
                <p>
                    <span>电子邮箱:</span>
                   <input type="email" name="myemail" placeholder="123456@126.com" required  multiple/> 
                </p>
                <p>
                    <span>
                        所在地:
                    </span>
                    <select>
                        <option>-请选择-</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option selected="selected">浙江</option>
                        <option>深圳</option>
                    </select>
                </p>
                    <p>
                        <span>身份证:</span>
                        <input type="text" name="card" required pattern="^\d {8,18} | [0-9x] {8,18} | [0-9x] {8,18?$" title="(必须填写，能够以数字、字母x结尾的短身份证号)"/>                       
                    </p>
                    <p>
                        <span>手机号:</span><input type="tel" name="telphone" pattern="^\d{11}$" required />
                    </p>
                    <p>
                        <span>意义反馈:</span>
                        <textarea cols="50" rows="5" placeholder="如果你有任何意见或者问题都可以来找我"></textarea>
                    </p><br/><br/><br/><br/>
                    <p>
                    <span></span>
                            <input type="submit" value="提交" class="btn"/>

                            <input type="reset" value="重置" class="btn"/>
                        </p>
               
            </form>
                
        </body>
    
</html>